<template>
	<view class="unauthorized-container">
		<!-- 顶部装饰波浪 -->
		<view class="wave-container">
			<view class="wave"></view>
			<view class="wave wave2"></view>
		</view>
		
		<!-- 错误图标和动画 -->
		<view class="error-icon-container">
			<view class="error-circle">
				<text class="error-mark">✕</text>
			</view>
			<view class="error-ripple"></view>
		</view>
		
		<!-- 错误消息 -->
		<view class="error-message">
			<text class="error-title">无权访问</text>
			<text class="error-subtitle">您没有访问此页面的权限</text>
		</view>
		
		<!-- 提示语 -->
		<view class="message-footer">
			<text class="message-footer-text">感谢您的理解与配合！</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adminEmail: 'admin@company.com',
				adminPhone: '0760-88888888'
			}
		}
	}
</script>

<style lang="scss">
	// 整体容器样式
	.unauthorized-container {
		min-height: 100vh;
		background-color: #f7f9fc;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 30rpx 60rpx;
		position: relative;
		overflow: hidden;
	}
	
	// 顶部波浪效果
	.wave-container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 280rpx;
		overflow: hidden;
	}
	
	.wave {
		position: absolute;
		top: -20rpx;
		left: 0;
		width: 200%;
		height: 280rpx;
		background: linear-gradient(90deg, #e74c3c, #f5664d);
		border-radius: 0 0 50% 50%;
		animation: wave 12s linear infinite;
	}
	
	.wave2 {
		top: -10rpx;
		opacity: 0.5;
		animation: wave 8s linear infinite;
		animation-delay: -3s;
	}
	
	@keyframes wave {
		0% {
			transform: translateX(0) scale(1.2);
		}
		100% {
			transform: translateX(-50%) scale(1.2);
		}
	}
	
	// 错误图标和动画
	.error-icon-container {
		margin-top: 180rpx;
		position: relative;
		z-index: 10;
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 40rpx;
	}
	
	.error-circle {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background-color: #e74c3c;
		box-shadow: 0 20rpx 30rpx rgba(231, 76, 60, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
	}
	
	.error-mark {
		font-size: 120rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.error-ripple {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 50%;
		border: 6rpx solid #e74c3c;
		animation: ripple 2s ease-out infinite;
		z-index: 1;
	}
	
	@keyframes ripple {
		0% {
			transform: scale(0.9);
			opacity: 0.8;
		}
		100% {
			transform: scale(1.5);
			opacity: 0;
		}
	}
	
	// 错误消息样式
	.error-message {
		text-align: center;
		margin-bottom: 60rpx;
		z-index: 10;
	}
	
	.error-title {
		font-size: 44rpx;
		font-weight: bold;
		color: #303133;
		margin-bottom: 16rpx;
		display: block;
	}
	
	.error-subtitle {
		font-size: 28rpx;
		color: #606266;
		display: block;
	}
	
	// 底部提示语
	.message-footer {
		margin-top: auto;
		text-align: center;
		z-index: 10;
	}
	
	.message-footer-text {
		font-size: 26rpx;
		color: #909399;
		font-style: italic;
	}
</style>